@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&display=swap');
                  
				         /* | ----------------- | */
				         /* | -- ОБЩИЕ СТИЛИ -- | */
				         /* | ----------------- | */

body {
	font-family: 'Roboto', Arial, sans-serif;
	background: #090915; /* общий цвет фона */
	color: #eeeeee;      /* общий цвет текста для заголовков и описаний */
}

::selection { /* задаём цвет выделения текста на сайте */
  background: #006109; /* цвет фона */
  color: #ffffff; /* цвет текста */
  text-shadow: none;
}


				         /* | ------------------ | */
				         /* | -- СТИЛИ БЛОКОВ -- | */
				         /* | ------------------ | */

/* ШАПКА */
    header {
	  position: fixed; /* фиксируем шапку сверху */
	  top: 0;       /* отступ сверху */
	  width: 100%;  /* резиновый макет ширины блока шапки */
	  z-index: 900; /* позиция шапки по отношению других блоков */
	  background: #372044; /* цвет фона шапки */
}

    .blok-header {
	   margin: 0 auto;    /* выравнивание блока шапки по центру */
	   max-width: 1300px; /* макс. ширина блок шапки */
}


/* КОНТЕНТ */
    main {
	  margin: 0 auto;    /* выравнивание блока меню по центру */
	  width: 100%;       /* задаём резиновый макет ширины блока main */
	  max-width: 1300px; /* задаём макс. ширину блока */
      margin-top: 190px; /* отступ сверху от края экрана*/
}

    .blok-content { /* OLD NAME: blok-center */
	   margin: 0 auto;    /* выравнивание блока с контентом по центру */
	   max-width: 1300px; /* макс. ширина блок контента */
	   padding: 0 15px;   /* отступ внутри блока слева/справо 15 */
}

    article {
	   margin-bottom: 20px; /* отступ снизу от блока к следующему */
}

	.info-content {
       padding: 0;
}

    .blok-series-content {
	   margin: 0 auto;
	   max-width: 1300px;
	   padding: 8px 15px;
	   /* background: #26182f; */
}

    footer {
	   border-top: 1px solid #e1e0e0;
	   font-size: 0.85em;  /* размер шрифта для заголовка */
	   text-align: center; /* выравниваем все блоки внутри тега footer по центру */
}


				         /* | ------------------ | */
				         /* | --- СТИЛИ МЕНЮ --- | */
				         /* | ------------------ | */
						 
/* МЕНЮ ШАПКИ */
    nav {
	  margin: 0 auto;    /* выравнивание блока меню по центру */
	  max-width: 1000px; /* макс. ширина блок контента */
}

    .menu-header {
	  width: 100%;
	  text-align: center;
}
  
    .menu-header li {
	   display: inline-block; /* Делаем меню по горизонтали */
	   font-weight: 600;      /* толщина шрифта */
}
  
    .menu-header li a {
	   color: #eeeeee;        /* цвет текста меню */
	   text-decoration: none; /* убираем нижнее подчёркивание */
	   padding: 2px 5px;      /* отступы сверху\снизу 1 слева\справо 5 */
	   display: block;
	   text-transform: uppercase; /* заголовок всегда заглавными буквами */
}

    .menu-header li a:hover {
	   color: #58c93a; /* цвет текста при наведении стрелки мышки */
}


/* МЕНЮ НАВИГАЦИИ */
    .menu-txt {
	   margin: 0 0 15px 10px; /* отступы сверху\справо 0, снизу 15, слева 10 */
}


				  /* | ------------------------------- | */
				  /* | -- СТИЛИ ТЕКСТА И ЗАГОЛОВКОВ -- | */
				  /* | ------------------------------- | */

    li {
	  list-style-type: none; /* Убираем маркеры у списков */
}

    .txt-content {
		 margin: 0 auto;
		 max-width: 900px;
		 padding: 1px 5px;
  }

    .info-content-o-kanale {		 
	     text-align: left;
	     margin-left: auto;
         margin-right: auto;
         width: 370px;
		 padding-left: 50px;
  }

    .akcent {
	    color: #ff6131;
	    font-size: 1.25em;  /* Задаём размер текста */
        font-weight: 500;
}

    p {
	  font-family: 'Roboto', Arial, sans-serif;
	  font-size: 1.5em; /* размер шрифта для текста описаний */
      line-height: 1.4; /* межстрочный интервал */
	  white-space: pre-wrap; /* свободное форматирование текста, учитывает пробелы переносы и не выходит за пределы границы ширины внутри блока в котором находится */
}

    .opisanie {
	  text-align: center;
	  font-size: 1.8em;
	  margin: 0 0 70px 0;
}

	.zag-center {
		 text-align: center; /* выравнивание по центру */
}

	h1 {
	     text-align: center;
	     margin: 0 0 10px 0; /* отступы: сверху, справо, снизу, слева */
		 font-size: 12em;  /* размер текста для заголовка */
		 font-weight: 600;   /* толщина шрифта */
		 color: #eeeeee;     /* цвет текста */
		 line-height: 1.1;   /* межстрочный интервал */
}

	h2 {
	     color: #eeeeee;
	     text-align: center;
         font-size: 3.5em;
         margin: 20px 0 10px 0;
}

    .zag-screenshot {
	    margin: 10px 0 10px 0;
		font-size: 1.50em;
		text-align: center;
		font-weight: 600;
		color: #eeeeee;
		line-height: 1.1;
}

    .zag-post {
	    margin: 10px 0 0 0;
		font-weight: 600;
		font-size: 1.50em;
}

	h4 {
	     margin: 0 0 10px 0; /* отступы: сверху, справо, снизу, слева */
		 font-size: 1.20em;  /* размер текста для заголовка */
		 font-weight: 600;   /* толщина шрифта */
		 color: #eeeeee;     /* цвет текста */
}


/* ТЕКСТ ЦИТАТ */
    .block-citat {
		 margin: 0 auto;
		 max-width: 900px;
	     padding: 0 120px;
}

    .citata {
	     min-height: 20px;
         padding: 18px;
         margin-bottom: 20px;
         background-color: #372044;
         border: 1px solid #eeeeee;
         border-radius: 4px;
         -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);
         box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);
}


				         /* | ------------------ | */
				         /* | --- WEB ССЫЛКИ --- | */
				         /* | ------------------ | */

    a.web {
	  color: #58c93a;   /* цвет ссылок */
	  text-decoration: none; /* убираем нижнее подчёркивание */
}

    .web:hover {
	  color: #ffe498;        /* цвет ссылок при наведении стрелки мышки */
	  text-decoration: none; /* убираем нижнее подчёркивание */
}

				     /* | ------------------------- | */
				     /* | --- СТИЛИ ИЗОБРАЖЕНИЙ --- | */
				     /* | ------------------------- | */

/* ЛОГОТИП */
    .logo {
	  margin: 20px auto;
	  width: 100%;
	  max-width: 300px;
	  display: block;
	  padding: 0 10px;
}

    .logo-footer {
	  width: 100%;
	  max-width: 220px;
}

    .img-block {
	   text-align: center;
}

    .soc_footer {
      -webkit-filter: sepia(100%);
      filter: sepia(100%);
}

    .soc_footer:hover {
      filter: none;
}

/* ОБТЕКАНИЕ ТЕКСТА */
    .img-left {
		 float: left;         /* обтекание текста слева от фото */
		 padding-right: 10px; /* отступы: сверху, справо, снизу, слева */
}

    .img-right {
		 float: right;       /* обтекание текста справа от фото */
		 padding-left: 10px; /* отступы: сверху, справо, снизу, слева */
}


/* СКРИНШОТЫ */
    .img250-screenshot { /* OLD NAME: img-screenshot-mini */
		 margin: 10px; /* отступы: сверху, справо, снизу, слева */
		 width: 100%;                 /* адаптивная ширина изображения */
		 height: auto;                /* размер по вертикале изображения */
		 max-width: 250px;            /* максимальная ширина изображения */
}

    .img300-screenshot {
		 margin: 10px;
		 width: 100%;
		 height: auto;
		 max-width: 300px;
}

    .img350-screenshot {
		 margin: 10px;
		 width: 100%;
		 height: auto;
		 max-width: 350px;
}

    .img400-screenshot { /* OLD NAME: img-screenshot-mini */
		 margin: 10px;
		 width: 100%;
		 height: auto;
		 max-width: 400px;
}

    .img450-screenshot {
		 margin: 10px;
		 width: 100%;
		 height: auto;
		 max-width: 450px;
}

    .img500-screenshot {
		 margin: 10px;
		 width: 100%;
		 height: auto;
		 max-width: 500px;
}

    .img600-screenshot {
		 margin: 10px;
		 width: 100%;
		 height: auto;
		 max-width: 600px;
}

    .img700-screenshot {
		 margin: 10px;
		 width: 100%;
		 height: auto;
		 max-width: 700px;
}


				         /* | -------------- | */
				         /* | --- КНОПКИ --- | */
				         /* | -------------- | */

	a.knopka {
	    border: 2px solid #c2c2c2; /* размер рамки кнопки и её цвет */
		color: #c2c2c2;   /* цвет ссылки */
		padding: 7px 15px;  /* отступы текста внутри кнопки сверху/снизу и слева и справо */
		border-radius: 20px; /* закругляем углы */
		text-decoration: none; /* убираем нижнее подчёркивание */
		display: inline-block;
  }

    a:hover.knopka  {
	    color: #58c93a; /* цвет ссылок в шапке меню при наведении мышки */
		border-color: #58c93a; /* цвет рамки кнопки при наведении */
  }

    .knopka:hover {        
	    border: 2px solid #413f3f; /* толщина, тип и цвет рамки */	    
}


			 /* | ------------------------------------ | */
			 /* | --- АДАПТИВНЫЙ ДИЗАЙН ПОД МОБИЛУ --- | */
			 /* | ------------------------------------ | */
			 
@media screen and (max-width:1350px){
	.blok-content {
	   padding: 0 50px;  /* отступы слева и права */
   }
}

@media screen and (max-width:1000px){
    .block-citat {
	   padding: 0 70px;
   }

    .img_fps {
       max-width: 300px;
   }
}

@media screen and (max-width:850px){	
	.img-left, .img-right {
	   float: none;
   }

    h1 {
		 font-size: 10em;
   }

    h2 {
		 font-size: 2.8em;
   }

}

@media screen and (max-width:700px){
   
	.img250-cover, .img300-cover, .img320-cover, .img350-cover, .img400-cover{
	   display: none;
   }
   
    h1 {
	   margin: 0;
   }
}

@media screen and (max-width:650px){
    .block-citat {
	     padding: 0 50px;
   }

    .citata {
	     min-height: 10px;
         padding: 9px;
         margin-bottom: 10px;
         border-radius: 2px;
   }

    .img200-Post, .img220-Post, .img250-Post, .img275-Post-height{
	   width: 40%;
   }
   
    h1 {
		 font-size: 8em;
   }

    .opisanie {
	  font-size: 1.6em;
   }

}

@media screen and (max-width:550px){
	main {
	     margin-top: 210px;
   }
}

@media screen and (max-width:500px){
	.blok-content {
		padding: 0 25px;  /* отступы слева и права */
   }
}

@media screen and (max-width:450px){
	main {
	     margin-top: 220px;
   }

    .block-citat {
	     padding: 0 30px;
   }

}

@media screen and (max-width:400px){
    main {
	     margin-top: 250px;
   }

    h1 {
		 font-size: 6em;
   }

   h2 {
		 font-size: 2.5em;
   }

   .opisanie {
	  font-size: 1.3em;
   }

}

@media screen and (max-width:360px){
	main {
	     margin-top: 270px;
   }

    .block-citat {
	     padding: 0 15px;
   }
}